<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" href="/static/index/css/page/base.css"/>
    <link rel="stylesheet" href="/static/index/css/page/font.css"/>
    <link rel="stylesheet" href="/static/index/jquery_weui/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/other.css" />
    <style>
        .weui-photo-browser-modal{
            z-index: 100;
        }
        /*图片处理css*/
        .personal-list .swiper-slide>a{
            overflow: hidden;
            position: relative;
        }
        .personal-list .swiper-slide>a img{

            position: absolute;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
<div class="pageControl personal bg-f5">
    <!--主体-->
    <div class="main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">{$user_info.name}</h1>
            <a class="msui_navTop-icon" href="../index/index.html">
                <i class="micon-home"></i>
            </a>
        </div>
        <div class="top">
            <a class="zhe"></a>
            <!--背景图片-->
            {if $user_info.user_back}
            <img src="{$user_info.user_back}" alt=""/>
            {else}
            <img src="/static/index/img/idx.png" alt=""/>
            {/if}
            <div class="index-top-tab">
                <div id="personal-bg"></div>
                <div class="personal_img viewImage">
                    <a href=""><img data-img="0" class="personal_img1 viewPhone" src="{$user_info.img}" alt="{$user_info.img}"/></a>
                </div>
                <p>{$user_info.name}</p>
                <div>
                    <p class=" renZh">
                        {if $user_info.sex eq 1}<img src="/static/index/images/n1.png" alt=""/>{else}<img src="/static/index/images/n0.png" alt=""/>{/if}
                        <span class="cl-47c">{$user_info.age}岁</span>
                    </p>
                    <p class=" renZh">
                        {if $user_info.is_rz eq 1}<img src="/static/index/images/x0.png" alt=""/>{/if}
                        <span  class="cl-fc8">{if $user_info.is_rz eq 0}未认证{elseif $user_info.is_rz eq 2}待审核{else}已认证{/if}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="other-nav ">
            <!--没有加为好友-->
            {if $is_friend eq 0}
           	<a id="add_friend" href="">
                <img src="/static/index/img/d3.png" alt=""/>
                <span class="cl-3333">好友</span>
            </a>
            {else}
            <!--已加好友-->
            <a id="add" href="/index/other/other_message?uid={$uid}&user_id={$user_id}">
                <img src="/static/index/img/d4.png" alt=""/>
                <span class="cl-26c">发信息</span>
            </a>
            {/if}
            {if $is_gz eq 0}
	            <a id="guanzhu" href="javascript:;">
	                <img src="/static/index/img/d1.png" alt=""/>
	                <span class="cl-ff7">关注</span>
	            </a>
            {else}
             	<a id="del_gz" href="javascript:;">
	                <img src="/static/index/img/d2.png" alt=""/>
	                <span class="cl-ff7">取消关注</span>
	            </a>
            {/if}
        </div>
        <div class="other-list personal-list">
        	{foreach name="info" item="vo"}
            <div class="list2 t0">
                <p class="list2-a">{$vo.content}</p>
                <!--<p class="list2-b">-- <span>阿尔伯特·爱因斯坦</span></p>-->
                <div class="swiper-container">
                        <div class="swiper-wrapper">
                        	<?php $ssh = explode("|",$vo['photo']);?>
                            {foreach name="ssh" item="city_photo"}
	                            <div class="swiper-slide">
	                                <a href="/index/index/detail?id={$vo.id}&uid={$vo.uid}"><img src="{$city_photo}" alt=""/></a>
	                            </div>
                            {/foreach}
                        </div>
                        <div class="pic-count"><?php echo count($ssh)?>张</div>
                </div>
                <div class="weui-cell1">
                    <div class="weui-cell__bd">
                        <!--<img src="/static/index/img/x1.png" alt=""/>
                        <span class="cl-9999">我在{$vo.address}</span>-->
                    </div>
                    <div class="weui-cell__ft">
                        <img src="/static/index/img/x2.png" alt=""/>
                        <span>{$vo.count}</span>
                    </div>
                    <div class="weui-cell__ft">
                        <img src="/static/index/img/x3.png" alt=""/>
                        <span>{$vo.comment_count}</span>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>
</div>
<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.min.js"></script>
<script src="/static/index/jquery_weui/js/swiper.min.js"></script>
<script>
    $(function(){
        $('.personal-list .swiper-slide').each(function(){
            var swiperWidth=$(this).css('width');
            console.log(swiperWidth)
            $(this).css('height',swiperWidth)
        })



        //		图片处理
        $('.personal-list .swiper-slide>a img').each(function(){

            var imgWidth=-parseFloat($(this).css('width'))/2;
            var imgHeight=-parseFloat($(this).css('height'))/2;
            /*console.log(imgWidth)
            console.log(imgHeight)*/

            var imgWidth1=parseFloat($(this).css('width'));
            var imgHeight1=parseFloat($(this).css('height'));
            if(imgWidth1>=imgHeight1){
                $(this).css({
                    height:'100%',
                    width:'auto'
                })
                $(this).css('top','0')
                $(this).css('margin-left',imgWidth)
            }else if(imgWidth1<imgHeight1){
                $(this).css({
                    height:'auto',
                    width:'100%'
                })
                $(this).css('margin-top',imgHeight)
                $(this).css('margin-left',imgWidth)
            }
        })
    })

    $('.viewImage').on('click','img.viewPhone',function (e) {
        e.preventDefault();
        var imgmain=[];
        var tt=$(this).parents('.viewImage').find('img.viewPhone');
        var countActive=$(this).attr('data-img');
        countActive=parseFloat(countActive);
        var count=tt.length;
        for (var i=0;i<count;i++){
            imgmain.push(tt[i].alt);
        }
        console.log(imgmain);
        var pb1 = $.photoBrowser({
            items:imgmain,
            onSlideChange: function(index) {
                console.log(index);
                console.log()
            },
            onOpen: function() {

            },
            onClose: function() {

            },
            initIndex:countActive
        });
        pb1.open();

        $(`.weui-photo-browser-modal.weui-photo-browser-modal-visible .swiper-wrapper .swiper-slide:nth-of-type(${countActive+1})`).addClass('swiper-slide-active')
    });

	//jquery获取url参数
	(function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);  
	
	
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 5
    });
    $(document).ready(function(){
        var perWidth = $(".personal_img1").css("width");
        $(".personal_img1").css("height",perWidth);
    })
    var listLength=$(".other-list").children().length;
    console.log(listLength)
    /*for(var j=0;j<listLength;j++){
        var sliderLength=$(`.other-list .t${j} .swiper-wrapper`).children().length;
        $(`.other-list .t${j} .pic-count`).html(sliderLength+"张")
    }*/
    $("#guanzhu").click(function (e) {
        e.preventDefault();
        user_id = {$user_id};
        if(user_id != 0){
	        $.post(
				"/index/other/friendgz", 
				{ user_id: user_id,friend_id:"{$uid}"},
			    function(data){
			    	alert(data);
			    	$.cookie('uid',{$uid});
			    	location.href="/index/other/other";
		   		}
			);
        }else{
        	alert('您还未登录，请先登录！');
    		$.post(
				"/index/other/set_other_gz", 
			    function(data){
			    	if(data == 1){
			    		uid = $.getUrlParam('uid');
//			    		console.log(uid)
    					window.location.href="/index/login/login_deng?gz_uid="+uid;
			    	}
		   		}
			);
        }
    })
    $('#add_friend').click(function(e){
        e.preventDefault();
        user_id = {$user_id};//当前登录用户id
        uid = {$uid};
        
        if(user_id != 0){
        	window.location.href="/index/other/other_yan?uid="+uid
        }else{
        	alert('您还未登录，请先登录！');
    		$.post(
				"/index/other/set_other_addfriend", 
			    function(data){
			    	if(data == 1){
			    		uid = $.getUrlParam('uid');
//			    		console.log(uid)
    					window.location.href="/index/login/login_deng?add_uid="+uid;
			    	}
		   		}
			);
        }
    	
    });
    $("#del_gz").click(function (e) {
        e.preventDefault();
        $.post(
			"/index/other/del_gz", 
			{ user_id: {$user_id},uid:{$uid},user_id:{$user_id}},
		    function(data){
		    	alert(data);
		    	$.cookie('uid',{$uid});
		    	location.href="/index/other/other";
	   		}
		);
    })
</script>
</body>
</html>

